<template>
	<view class="children-info-view1">
		<children-head-view :imgUrl="imgUrl" :gray="gray" :gender="gender"></children-head-view>
		<view class="name">{{name}}</view>
		<view v-if="state" class="state">{{state}}</view>
	</view>
</template>

<script>
	import ChildrenHeadView from '@/components/children-head-view.vue'
	export default {
		name:"ChildrenInfoView",
		components: {
			ChildrenHeadView
		},
		props: {
			imgUrl: {
				type: String,
				default () {
					return ''
				}
			},
			gender: {
				type: Number,
				default () {
					return 0
				}
			},
			gray: {
				type: Boolean,
				default () {
					return false
				}
			},
			name: {
				type: String,
				default () {
					return ''
				}
			},
			state: {
				type: String,
				default () {
					return ''
				}
			},
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
	.children-info-view1{
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		width: 140rpx;
	}
	.name{
		margin-top: 20rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	
	.state{
		position: absolute;
		left: 0;
		top: 20rpx;
		width: 60rpx;
		height: 25rpx;
		background: #DA473A;
		border-radius: 5rpx;
		
		font-size: 18rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
